<template>
  <el-container>
    <!-- Aside -->
    <el-aside width="200">
      <h1 class="logo"></h1>
      <el-menu :collapse="collapse" class="el-qf-menu" :default-active="$route.path">
        <qf-sub-menu :sideMenu="sideMenu"></qf-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- Header -->
      <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6"
            ><div class="grid-content left">
              <i
                @click="collapse = !collapse"
                :class="['iconfont', collapse ? 'icon-zhankai' : 'icon-shouqi']"
              ></i></div
          ></el-col>
          <el-col :span="6"><div class="grid-content center">CRM系统</div></el-col>
          <el-col :span="6"
            ><div class="grid-content right">
              <el-avatar shape="square" size="large" :src="avatarUrl"></el-avatar>
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                  <!-- <i :class="viplogo"></i> -->
                  <svg class="icon viplogo" aria-hidden="true">
                    <use :xlink:href="viplogo"></use>
                  </svg>
                  <span class="nickname">{{ userInfo.nickname }}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="a">
                    <i class="iconfont icon-vip"></i>
                    vip到期时间<br />
                    {{ userInfoObj.vipExpires }}
                  </el-dropdown-item>
                  <el-dropdown-item command="b" divided
                    ><i class="iconfont icon-chongzhi"></i>vip充值</el-dropdown-item
                  >
                  <el-dropdown-item command="c" divided
                    ><i class="iconfont icon-zhanghaoxinxi_moren"></i
                    >账号信息</el-dropdown-item
                  >
                  <el-dropdown-item command="d" divided
                    ><i class="iconfont icon-xiangmuguanli"></i>项目管理</el-dropdown-item
                  >
                  <el-dropdown-item command="e" divided
                    ><i class="iconfont icon-icon"></i>退出</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div></el-col
          >
        </el-row>
      </el-header>
      <!-- Main -->
      <el-main>
        <!-- 面包屑位置 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            v-for="item in breadCrumb"
            :key="item.name"
            :to="{ name: item.name }"
            >{{ item.meta.name }}</el-breadcrumb-item
          >
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import * as api from "../../api";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo", "sideMenu", "breadCrumb"]),
    avatarUrl() {
      //如果用户有头像就更换，没头像就默认
      return this.userInfo.headimgurl
        ? this.userInfo.headimgurl
        : "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
    },
  },
  mounted() {
    this.fn();
  },
  data() {
    return {
      collapse: false,
      userInfoObj: {},
      level: 0,
      viplogo: "",
    };
  },
  methods: {
    fn() {
      this.userInfoObj = JSON.parse(localStorage.getItem("qf-userInfo"));
      this.level = this.userInfoObj.vipLevel;
      //输出level
      console.log(this.level);
      //判断vip等级，渲染不同的vip标志
      if (this.level == 3) {
        // this.viplogo = "iconfont icon-chuangxianghuangjinvip";
        this.viplogo = "#icon-chuangxianghuangjinvip";
      }
      if (this.level == 2) {
        // this.viplogo = "iconfont icon-chuangxiangbaiyinvip";
        this.viplogo = "#icon-chuangxiangbaiyinvip";
      }
      if (this.level == 1) {
        // this.viplogo = "iconfont icon-chuangxiangqingtongvip";
        this.viplogo = "#icon-chuangxiangqingtongvip";
      }
      if (this.level == 0) {
        // this.viplogo = "iconfont icon-VIP";
        this.viplogo = "#icon-VIP";
      }
    },
    handleCommand(command) {
      if (command == "a") {
        this.$router.push({
          name: "vipmanager",
        });
      }
      if (command == "b") {
        this.$router.push({
          name: "charge",
        });
      }
      if (command == "c") {
        this.$router.push({
          name: "mine",
        });
      }
      if (command == "d") {
        this.$router.push({
          name: "studentManager",
        });
      }
      if (command == "e") {
        //退出登陆，清除token，跳转到login
        localStorage.removeItem("qf-token");
        this.$router.push("/login");
        //刷新页面清除缓存
        location.reload();
      }
    },
  },
};
</script>

<style scoped lang="less">
.el-header {
  min-height: 60px !important;
  background: linear-gradient(135deg, #4c67ff, #5635df);
  background-color: #b3c0d1;
  color: #fff;
  font-weight: bolder;
  text-align: center;
  line-height: 40px;
  .left {
    text-align: left;
    i {
      font-size: 30px;
      cursor: pointer;
    }
  }
  .center {
    font-size: 30px;
  }
  .right {
    .nickname {
      color: red;
      font-size: 20px;
      cursor: pointer;
      position: relative;
      top: -12px;
    }
    .icon-chuangxiangbaiyinvip,
    .icon-chuangxianghuangjinvip,
    .icon-chuangxiangqingtongvip {
      cursor: pointer;
      font-size: 40px;
      // color:yellow;
    }
    .viplogo{
      font-size:50px;
      cursor:pointer;
    }
    .icon-VIP {
      cursor: pointer;
      font-size: 25px;
      // color:yellow;
      position: relative;
      top: -10px;
      margin: 0 10px;
    }
    .el-icon--right {
      font-size: 20px;
      color: red;
      cursor: pointer;
      position: relative;
      top: -12px;
    }
  }
}

.el-aside {
  background: linear-gradient(135deg, #4c67ff, #5635df);
  color: #333;
  text-align: center;
  // line-height: 200px;
  .logo {
    min-height: 60px;
    // background:#ccc;
  }
  .subMenu {
    text-align: left;
  }
  .el-qf-menu:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  //   line-height: 160px;
}

.el-container {
  margin-bottom: 40px;
  height: 100%;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
// hader三分布局
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
</style>
